<style include="network-shared">
  div {
    color: var(--cr-secondary-text-color);
  }

  #apnDescription {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-inline-end: 40px;
    min-height: var(--cr-section-min-height);
    padding: 0 var(--cr-section-padding) 10px var(--cr-section-padding);
  }

  iron-list {
    display: block;
    padding: 0 0 0 var(--cr-section-padding);
  }

  apn-list-item {
    align-items: center;
    border-top: var(--cr-separator-line);
    display: flex;
    min-height: var(--settings-row-min-height);
    padding: 0 20px 0 0;
  }

  #errorMessage {
    display: flex;
    margin: 30px;
    margin-inline-end: 80px;
  }

  iron-icon[icon='cr20:warning'] {
    --iron-icon-width: 1rem;
    --iron-icon-height: 1rem;
    --iron-icon-fill-color: var(--cros-text-color-warning);
    margin-inline-end: 18px;
  }

  #zeroStateText {
    border-top: var(--cr-separator-line);
    display: flex;
    margin-inline-end: 40px;
    padding: 10px var(--cr-section-padding) 10px var(--cr-section-padding);
  }

  iron-icon[icon='cr:info-outline'] {
    --iron-icon-width: 1rem;
    --iron-icon-height: 1rem;
    --iron-icon-fill-color: var(--cr-secondary-text-color);
    margin-inline-end: 10px;
  }
</style>
<div id="apnDescription" class="property-box">
  <template is="dom-if" if="[[!shouldOmitLinks]]" restamp>
    <localized-link
        localized-string="[[i18nAdvanced('apnSettingsDescriptionWithLink')]]"
        on-link-clicked="onLearnMoreClicked_">
    </localized-link>
  </template>
  <template is="dom-if" if="[[shouldOmitLinks]]" restamp>
    <div id="descriptionNoLink" aria-live="polite">
      [[i18n('apnSettingsDescriptionNoLink')]]
    </div>
  </template>
  <template is="dom-if"
      if="[[shouldShowErrorMessage_(managedCellularProperties,
          errorState)]]" restamp>
    <div id="errorMessage">
      <span><iron-icon icon="cr20:warning"></iron-icon></span>
      <localized-link
          localized-string="[[getErrorMessage_(managedCellularProperties,
              errorState)]]">
      </localized-link>
    </div>
  </template>
</div>

<template is="dom-if"
    if="[[shouldShowZeroStateText_(managedCellularProperties, errorState)]]"
    restamp>
  <div id="zeroStateText">
    <span><iron-icon icon="cr:info-outline"></iron-icon></span>
    <div>[[i18n('apnSettingsZeroStateDescription')]]</div>
  </div>
</template>

<iron-list items="[[getApns_(managedCellularProperties)]]"
    on-show-apn-detail-dialog="onShowApnDetailDialog_">
  <template>
    <apn-list-item
        apn="[[item]]"
        is-connected="[[isApnConnected_(index, managedCellularProperties)]]"
        should-disallow-disabling-removing="[[shouldDisallowDisablingRemoving_(item)]]"
        should-disallow-enabling="[[shouldDisallowEnabling_(item)]]"
        guid="[[guid]]">
    </apn-list-item>
  </template>
</iron-list>

<template is="dom-if" if="[[shouldShowApnDetailDialog_]]" restamp>
  <apn-detail-dialog id="apnDetailDialog"
      mode="[[apnDetailDialogMode_]]"
      guid="[[guid]]"
      apn-list="[[getCustomApns_(managedCellularProperties)]]"
      on-close="onApnDetailDialogClose_">
  </apn-detail-dialog>
</template>